<template>
  <Form ref="passwdResetForm" :model="formData" :rules="ruleCustom" :label-width="80">
    <!-- <FormItem label="姓名">
            <i-Input v-model="formData.name"  :readonly="true"></i-Input>
    </FormItem>-->
    <Row v-show="!isAdmin" >
      <Col span="19">
        <FormItem label="旧密码">
          <Input type="password" :disabled="!disabled" v-model="formData.oldPassword"></Input>
        </FormItem>
      </Col>
      <Col span="1" class="is-place"/>
      <Col span="3">
        <div>
          <Button type="info" :disabled="!disabled" ghost @click="checkOldPassword">验证</Button>
        </div>
      </Col>
    </Row>
    <FormItem label="新密码" prop="newPassword">
      <Input type="password" v-model="formData.newPassword" :disabled="disabled"></Input>
    </FormItem>
    <FormItem label="再次输入" prop="passwdCheck">
      <Input type="password" v-model="formData.passwdCheck" :disabled="disabled"></Input>
    </FormItem>
  </Form>
</template>

<script>
import { checkOldPassword } from '@/api/user'
export default {
  name: 'UpdatePassword',
  props: ['row', 'isAdmin'],
  watch: {
    row (v) {
      this.formData = v
    }
  },
  data () {
    return {
      formData: {},
      disabled: false,
      ruleCustom: {
        newPassword: [
          { required: true, validator: this.validatePass, trigger: 'blur' }
        ],
        passwdCheck: [
          { required: true, validator: this.validatePassCheck, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validatePass (rule, value, callback) {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (value.length < 6 || value.length > 30) {
        callback(new Error('请再次输入，密码长度只能6-30位'))
      } else {
        if (this.formData.passwdCheck) {
          // 对第二个密码框单独验证
          // this.$refs.UpdatePasswordForm.validateField('passwdCheck')
        }
        callback()
      }
    },
    validatePassCheck (rule, value, callback) {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formData.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    },
    checkOldPassword () {
      delete this.formData.name
      checkOldPassword(this.formData).then(res => {
        if (res.data.code === 200) {
          this.$Message.success('验证通过')
          // 开启显示
          this.disabled = false // 显示输入密码框
        } else {
          // 不开启下面输入密码框
          this.$Message.error('密码验证不通过')
        }
      })
    },

    handleOk () {
      debugger
      this.$refs['passwdResetForm'].validate(valid => {
        if (valid) {
          this.$emit('validate-success', this.formData)
        }
      })
    }

    /*
        // 重置
        handleReset (name) {
            this.$refs[name].resetFields()
        },

        handleCancel () {
            this.handleReset('UpdatePasswordForm')
            this.formData = {}
        } */
  },
  mounted () {
    this.disabled = !this.isAdmin
  }
}
</script>

<style scoped>
.is-place {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  border-color: transparent;
}
</style>
